<template>
	<view>
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view v-for="(item, index) in friendList" :key="index">
				<u-index-anchor :index="item.letter" />
				<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index"
					@click="toChatPage(item1)">
					<view>
						<u-avatar :src="item1.faceImage"></u-avatar>
					</view>
					<view style="margin: 10px;">{{item1.nickname}}</view>
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '联系组',
				friendList: [],
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		onLoad() {
			this.connectWS();
			this.getFriendList();
		},
		methods: {
			// 连接ws
			connectWS() {
				console.log('eee')
				uni.connectSocket({
					url: 'ws://192.168.1.8:8088/ws',
					header: {
						'content-type': 'application/json'
					},
					method: 'GET'
				});
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket连接关闭，请检查！');
				});
			},
			// 跳转到聊天页
			toChatPage(data) {
				console.log(data);
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/chat/index?id=' + data.id + '&name=' + data.nickname
				});
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			getFriendList() {
				console.log("开始加载用户列表");
				this.$u.api.getCurrUserFriends().then(res => {
					console.log("--res", res);
					if (res) {
						this.friendList = res;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
